<template>
    <div id="ball-tab-content">

      <!--日期-->
        <div class="tab_con_top">
            <div class="left">
               <p>第2018015期 截止：2018-02-04 19:30:00 奖池：3.71亿</p>
            </div>
            <div class="right">
                <a href=""><span>手动选号</span></a>
                <span>|</span>
                <a href=""><span>走势图</span></a>
            </div>
        </div>

      <!--球号-->
        <div class="tab_con_middle">
            <div class="number">
                <span>{{number[0]}}</span>
                <span>{{number[1]}}</span>
                <span>{{number[2]}}</span>
                <span>{{number[3]}}</span>
                <span>{{number[4]}}</span>
                <span>{{number[5]}}</span>
                <span class="blue">{{number[6]}}</span>
            </div>
            <div class="betButton">
                <button class="btn btn-lg" @click="changeNumber">
                  <i class="glyphicon glyphicon-refresh"></i>
                  换一注
                </button>
            </div>
        </div>

      <!--投注按钮-->
        <div class="tab_con_bottom">

          <div class="input-group left">
            <span class="input-group-addon" @click="removeRate">-</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" v-model="rate">
            <span class="input-group-addon" @click="addRate">+</span>
          </div>

          <div class="middle">
            <p>共<span style="color: red">{{price}}</span>元</p>
          </div>

          <div class="right">
            <button type="button" class="btn btn-danger btn-lg">
              立即投注
            </button>
            <span class="rate-text">倍</span>
          </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "ball-tab-content",
        components: {
        },
        data(){
            return {
                number: [30, 15, 17, 13, 14, 16, 12], //球号
                price: 0,
                rate: 10
            };
        },
        methods: {
            //改变球号
            changeNumber(){
               this.number.reverse();
            },
            //增加倍率
            addRate(){
              this.rate += 1;
            },
            //减少倍率
            removeRate(){
              this.rate -= 1;
            }
        }
    }
</script>

<style scoped>
#ball-tab-content .tab_con_top{
    display: flex;
    justify-content: space-between;
}

/*顶部*/
#ball-tab-content .tab_con_top .left,
#ball-tab-content .tab_con_top .right{
   margin-top: 10px;
   font-size: 14px;
   color: #999;
}

/*顶部a样式*/
#ball-tab-content .tab_con_top .right a{
    font-size: 14px;
    color: #999;
}
#ball-tab-content .tab_con_top .right a:hover {
   text-decoration: none;
    color: #e23a3a;
}

/*中部*/
#ball-tab-content .tab_con_middle{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}
#ball-tab-content .tab_con_middle .number{
    width: 450px;
   display: flex;
    justify-content: space-between;
}

/*每个球*/
#ball-tab-content .tab_con_middle span {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    vertical-align: center;
    background: #e23a3a;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 50px;
    /*添加动画*/
    animation: changeBall 1s ease infinite;
}
@keyframes changeBall{
  0%{ background: mediumvioletred;}
  50%{background: darkred;}
  100%{ background: tomato;}
}

/*最后一个球动画*/
#ball-tab-content .tab_con_middle .blue{
  animation: changeColor 1s ease infinite;
}
@keyframes changeColor{
  0%{ background: greenyellow;}
  50%{background: green;}
  100%{ background: darkseagreen;}
}

/*篮球*/
#ball-tab-content .tab_con_middle span.blue {
   background: #4493eb;
}

/*投注按钮父亲*/
#ball-tab-content .tab_con_middle .betButton{
    font-size: 16px;
    color: #555;
}

/*投注按钮*/
#ball-tab-content .tab_con_middle .betButton button{
    border: 2px solid #e5e5e5;
    background: white;
}

/*移入背景色*/
#ball-tab-content .tab_con_middle .betButton button:hover{
    background: #f6f6f6;
}

/*投注按钮*/
#ball-tab-content .tab_con_bottom .left{
  width: 152px;
  height: 48px;
  margin-top: 25px;
}
#ball-tab-content .tab_con_bottom .left input{
  height: 48px;
}
#ball-tab-content .tab_con_bottom .left span{
  background: transparent;
}
#ball-tab-content .tab_con_bottom .left span:hover{
  cursor: pointer;
}

/*中间部分*/
#ball-tab-content .tab_con_bottom .middle{
  position: relative;
  top: -35px;
  left: 200px;
}
#ball-tab-content .tab_con_bottom .right{
  position: relative;
  top: -79px;
  left: 520px;
}

#ball-tab-content .tab_con_bottom .right .rate-text{
  position: relative;
  left: -470px;
  top: 2px;
}
</style>
